<template>
  <div class="app-container">
    <!-- 头部按钮组 -->
    <menu-button @handleChange="openWin" />
    <div style="margin: 10px 0; height: 1px; background-color: #dfe6ec" />
    <!-- 单选组（过滤数据） -->
    <div style="margin-bottom: 10px">
      <el-radio-group v-model="radio3" size="small">
        <el-radio label="1" border>备选项1</el-radio>
        <el-radio label="2" border>备选项2</el-radio>
      </el-radio-group>
    </div>
    <!-- 数据列表（表格） -->
    <stu-table
      :list="tableData"
      :columns="propsLabel"
      :handles="handles"
      @handleClick="clickHandle"
    />
  </div>
</template>

<script>
// import { parseTime } from '@/utils'

export default {
  name: "User",
  data() {
    return {
      tableData: [], // 表格的列表数据
      propsLabel: [
        // 表格的表头数据及其参数名称
        { name: "序号", value: "index" },
        { name: "用户名", value: "name" },
        { name: "年龄", value: "age" },
        { name: "电话", value: "phone" },
        { name: "邮箱", value: "email" },
        { name: "备注", value: "comment" },
        { name: "用户密码", value: "password" },
        { name: "等级", value: "level" },
        { name: "当前状态", value: "state" },
        { name: "创建人", value: "createUser" },
        { name: "创建时间", value: "createTime" }
      ],
      handles: {
        // 表格的操作列--show: true/false
        name: "操作",
        width: "200",
        show: false,
        btns: [
          { name: "修改", show: true, type: "edit", btnType: "primary" },
          { name: "删除", show: true, type: "remove", btnType: "danger" }
        ]
      },
      dialogs: {
        // 弹窗数据
        title: "新增目录",
        data: {}
      },
      radio3: "1"
    };
  },
  created() {
    // this.getTables()
  },
  methods: {
    // 按钮组的操作
    openWin(v) {},
    // 关闭弹窗
    close() {},
    // 获取表个数据
    getTables() {},
    // 刷新数据
    reflesh() {},
    // 表格的操作项
    clickHandle(row, type) {
      if (type === "edit") {
        this.dialogs.title = "修改菜单";
        this.dialogs.data = row;
        // this.isEdit = true
      } else if (type === "remove") {
        this.$confirm("此操作将永久删除该目录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // const params = {
            //   id: row.id
            // }
            // removeMenu(params).then(res => {
            //   if (res.state === 100) {
            //     this.$message({ type: 'success', message: '删除成功!' })
            //     this.reflesh()
            //   }
            // })
          })
          .catch(() => {});
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-radio {
  margin-right: 0;
}
</style>
